<template>
  <div>
		<cityHeader></cityHeader>
		<citySearch :city="cities"></citySearch>
		<cityList :hotCities="hotCities" :cities="cities" :clickText="clickText"></cityList>
		<cityNav :city="cities" @sendInfo="getIndex"></cityNav>
	</div>
</template>
<script>
import cityHeader from './components/header'
import citySearch from './components/search'
import cityList from './components/list'
import cityNav from './components/nav'
import axios from 'axios' 
export default {
	name: 'City',
	components: {
		cityHeader,
		citySearch,
		cityList,
		cityNav
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      clickText: '',
    }
  },
  methods: {
    getInfo (response) {//ajax回调函数 用于处理接收到的json数据
      // console.log(response)
      const res = response.data// 得到json数据
      if (res.data && res.ret) {
        this.hotCities = res.data.hotCities
        this.cities = res.data.cities
      }
    },
    getIndex (text) {//接收nav组件传递来的 被点击的导航li的内容
      this.clickText = text
    }
  },
  mounted () {
    axios.get('/api/city.json').then(this.getInfo)
  }
}
</script>
